<template>
    <div class="progress-wrap" ref="pogressRef">
        <div class="outer" :style="{ backgroundColor: props.backgroundColor }">
            <div class="inner" :style="{ backgroundColor:  props.progressColor, width: progressWidth}">
            </div>
        </div>
        <span class="label">{{ `${props.value}/${props.max}` }}</span>
    </div>
</template>
  
<script setup>
import { watch, ref, computed } from 'vue'

const props = defineProps({
    max: {
        type: Number,
        default: 100
    },
    value: {
        type: Number,
        default: 50
    },
    backgroundColor: {
        type: String,
        default: '#fff'
    },
    progressColor: {
        type: String,
        default: '#FFB530'
    }
});

let pogressRef = ref(null);

const progressWidth = computed(() => {

    console.log(props.value);
    console.log(props.max);

    console.log('00000',(props.value / props.max) * 100);
    return `${(props.value / props.max) * 100}%`;
});

// const show = ref(props.open)
// watch(() => props.open, (val) => {
//     show.value = val;
// });

</script>
  
<style scoped>
.progress-wrap {
    background-color: transparent;
    overflow: hidden;
}
.outer {
    width: 100%;
    height: 100%;
    border-radius: 100rem;
    overflow: hidden;
    position: relative;
}
.inner {
    position: absolute;
    left: 0;
    top: 0;
    /* width: 100%; */
    height: 100%;
    border-radius: 100rem;
    overflow: hidden;
}
 
.label {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1rem;
    font-size: 1.2rem;
    color: #666666;
}

</style>
  